<template>
<view>
	<view class="view_input1">
	    <view class="view_input_title2">姓名:</view>
		<input class="view_input_input1" type="text" v-model="form.username"
		placeholder-class="placeholderClass" placeholder="请输入姓名"/>
		<text class="red">*</text>
	</view>
	<view class="view_input1">
	    <view class="view_input_title2">联系电话:</view>
		<input class="view_input_input1" type="text" v-model="form.phone"
		placeholder-class="placeholderClass" placeholder="请输入联系电话"/>
		<text class="red">*</text>
	</view>
	<view class="view_input1">
	    <view class="view_input_title2">生日:</view>
		<view class="view_date">
			<input class="view_date_input" type="number" v-model="year"
			placeholder-class="plclass" maxlength="4" placeholder="1991"/>
			--
			<input class="view_date_input" type="number" v-model="month"
			placeholder-class="plclass" placeholder="03" maxlength="2"/>
			--
			<input class="view_date_input" type="number" v-model="day"
			placeholder-class="plclass" placeholder="15" maxlength="2" />
		</view>
		<!--<picker class="view_input_input1" mode="date" :value="form.birthDay" 
		@change="bindFormChange" data-name="birthDay">
		    <view>{{form.birthDay ? form.birthDay : '请选择生日'}}</view>
		</picker>-->
	</view>
	<view class="view_input1">
	    <view class="view_input_title2">结婚纪念日:</view>
		<picker class="view_input_input1" mode="date" :value="form.marryDay" 
		@change="bindFormChange" data-name="marryDay">
		    <view>{{form.marryDay ? form.marryDay : '请选择结婚纪念日'}}</view>
		</picker>
	</view>
	<view class="view_input1">
	    <view class="view_input_title2">子女生日:</view>
		<picker class="view_input_input1" mode="date" :value="form.sonBirthDay" 
		@change="bindFormChange" data-name="sonBirthDay">
		    <view>{{form.sonBirthDay ? form.sonBirthDay : '请选择子女生日'}}</view>
		</picker>
	</view>

	<view class="view_input1">
	    <view class="view_input_title2">客户等级:</view>
		<picker class="view_input_input1" @change="bindFormIndexChange" :value="lvIndex" 
		:range="lv"
		data-name="lv" data-index="lvIndex" data-arr="lv">
			<view>{{form.lv ? form.lv : lv[lvIndex]}}</view>
		</picker>
	</view>
	<view class="view_input1">
	    <view class="view_input_title2">客户来源:</view>
		<picker class="view_input_input1" @change="bindSource" :value="sourceIndex" :range="source">
			<view>{{form.source ? form.source : source[sourceIndex]}}</view>
		</picker>
	</view>
	<view class="view_input1">
	    <view class="view_input_title2">美容师:</view>
		<picker class="view_input_input1" @change="bindFormIndexChange" :value="userIndex" 
		:range="userArr"
		data-name="user_id" data-index="userIndex" data-arr="userArr" range-key="name">
			<view>{{userArr[userIndex]['name']}}</view>
		</picker>
	</view>
	<button v-if="submittrue"  @click="userAdd" class="strue">提交</button>
	<button v-else  class="sfalse" disabled="true">提交</button>
</view>
</template>
<script>
import request from '@/util/request.js'
export default {
	data() {
		return {
			form:{
				marryDay:'',
				sonBirthDay:'',
				lv:'D',
				source:''
			},
			submittrue:true,
			lv:['A','B','C','D'],
			lvIndex:0,
			userArr:[
				{'id':0,'uid':0,'name':'无'},
			],
			userIndex:0,
			source:['主动进店','大众点评','朋友推荐','地推拓客','小程序','异业联盟','其他'],
			sourceIndex:0,
			oaRole:0,
			year:'',
			month:'',
			day:'',
			monthArr:['01','02','03','04','05','06','07','08','09','10','11','12'],
			dayArr:['01','02','03','04','05','06','07','08','09','10','11','12','14','15',
			'16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31']
		}
	},
	onLoad:function(e){
		this.oaRole = uni.getStorageSync('oaRole')
		if(e.id){
			this.getInfo(e.id)
		}else{
			this.getUser('')
		}
	},
	methods: {
		getInfo:function(id){
			var data = {member_id:id}
			var that = this
			request({
				url: 'manage/member/info',
				method: 'get',
				data:data,
				success: (res) => {
					that.form = res.data.data
					for(var x in that.source){
						if(that.source[x] == res.data.data.source){
							that.sourceIndex = x
							break;
						}
					}
					that.getUser(res.data.data.user_id)
				},
			})
		},
		userAdd:function(){
			if(!this.form.username || !this.form.phone){
				uni.showToast({
					title: '会员姓名和电话,必填!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			if(!this.year || !this.month || !this.day){
				uni.showToast({
					title: '请输入会员生日!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			if(this.monthArr.indexOf(this.month) == '-1'){
				uni.showToast({
					title: '请填写正确的月份格式!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			if(this.dayhArr.indexOf(this.day) == '-1'){
				uni.showToast({
					title: '请填写正确的日期格式!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			this.form.birthDay = this.year+'-'+this.month+'-'+this.day
			this.form.oa_id = uni.getStorageSync('oa_id')
			this.submittrue = false
			var that = this
			request({
				url: 'manage/member/add',
				method: 'post',
				data:this.form,
				success: (res) => {
					if(res.data.code == 1){
						//that.submittrue = true
						uni.showToast({
							title:'请求成功',
							icon: 'none',
							duration: 2000,
							success() {
								setTimeout(function() {
									uni.navigateBack()
								}, 2000);
							}
						})
					}else{
						uni.showToast({
							title: '请求失败!!',
							icon: "none", 
							position:'bottom',
						});
						return;
					}
				},
			})
		},
		bindFormChange:function(e){
			let name = e.currentTarget.dataset.name
			this.form[name] = e.detail.value
		},
		bindSource:function(e){
			this.sourceIndex = e.detail.value
			this.form.source = this.source[e.detail.value]
		},
		bindFormIndexChange:function(e){
			let name = e.currentTarget.dataset.name
			let value = e.detail.value
			let index = e.currentTarget.dataset.index
			let arr = e.currentTarget.dataset.arr
			this[index] = value
			if(name == 'user_id'){
				this.form[name] = this[arr][value]['uid']
			}else{
				this.form[name] = this[arr][value]
			}
		},
		getUser:function(uid){
			var data = {
			  oa_id:uni.getStorageSync('oa_id')
			}
			var that = this
			request({
				url: 'manage/user/all',
				method: 'get',
				data:data,
				success: (res) => {
					var arr = res.data.data;
					that.userArr = that.userArr.concat(arr)
					if(uid){
						for(var x in that.userArr){
							if(that.userArr[x]['uid'] == uid){
								that.userIndex = x
								break;
							}
						}
					}
				},
			})
		}
	},
}
</script>
<style>
.red{
	color:#B30000;
}
.strue{
	position: absolute;
	height:80rpx;line-height:80rpx;
	left: 5%;bottom: 20rpx;width:90%;
	background:#ff861a;
	position: fixed;z-index:999;
	color:#FFFFFF;
}
.sfalse{
	position: absolute;
	height:80rpx;line-height:80rpx;
	left: 5%;bottom: 20rpx;
	width:90%;background:#cccccc;
	color:#FFFFFF;
	position: fixed;z-index:999
}
.view_date{
	width:70%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.view_date_input{
	width:150rpx;
	border:1rpx solid #a6a6a6;
	height:60rpx;
	line-height: 60rpx;
	text-align: center;
}
.plclass{
	font-size:15px;
	font-family:PingFang SC;
	font-weight:500;
}
</style>